﻿<%@ Page Language="c#" CodeFile="~/Default.aspx.cs" Inherits="TallComponents.Web.WebForm1" %>
<%@ Register TagPrefix="tc" Namespace="TallComponents.Web" Assembly="App_Code" %>
<%@ Register TagPrefix="tc" Namespace="TallComponents.Web.Pdf" Assembly="TallComponents.Web.PdfViewer" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head runat="server">
   <title>PDF web viewer</title>
   <style type="text/css">
      body { font-family: Verdana, Arial, Helvetica, _sans; font-size: 12px; }
      img { border: 0px; }
      .thumb { display: block; margin: 0px; padding:0px; }
      .thumb img { border: solid 1px #999999; margin: 3px; }
      .thumb:hover img { border: solid 2px #66ff33; margin: 2px; }
      .active img { border: solid 2px black; margin: 2px; }
      a:active { outline: 0 none black; }
      .pdftbActive { background-color: Blue; }
      .toolbar { height: 24px; background-color: #EdEdFF; }
      .searchBox { margin: 1px; border: none 0px; width: 100px; }
      .selection {border: solid 1px green; }
   </style>
   <link rel="Stylesheet" type="text/css" href="modal.css" />
</head>
<body>
   <form id="Form1" method="post" runat="server" enctype="multipart/form-data">
   <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">
     <Scripts>
         <asp:ScriptReference Path="search.js" />
     </Scripts>
   </asp:ScriptManager>
   <script type="text/javascript">
      Sys.Application.add_load(function() {
         $find('Toolbar').add_buttonClick(function(sender, args) {
            if (args.command == 'open') {
               var modal = $find('Modal1').show(450, 300);
            } else if (args.command == 'close') {
               window.location.href = window.location.href;
            }
         });
      });
   </script>
   <tc:ModalDialog runat="server" ID="Modal1" Title="Upload a file">
   <p>
   <input type="file" size="50" name="pdf" />
   </p>
   <asp:Button runat="server" Text="Upload" ID="uploadPdf" OnClick="uploadPdf_Click" /> <input type="button" value="Cancel" onclick="$find('Modal1').hide(); return false;" />
   </tc:ModalDialog>
   <table cellpadding="0" cellspacing="2" style="width: auto;">
      <tr>
         <td style="border:1px solid #aaaaaa">
            <tc:PdfThumbnailsList ID="thumbnails" runat="server" ThumbnailCssClass="thumb" SelectedThumbnailCssClass="active" PdfViewerControlId="pdfViewer" Width="160" Height="600" ServiceUrl="pageasimage.ashx" />
         </td>
         <td valign="top" style="border:1px solid #aaaaaa">
            <tc:PdfViewerToolbar ID="Toolbar" runat="server" PdfViewerControlId="pdfViewer" ShowFileButtons="true" ShowSearchBox="true"/>
            <tc:PdfViewer ID="pdfViewer" SearchResultCssClass="selection" runat="server" Width="800" Height="576" PageIndex="0" ZoomMode="FitToPage" PageLayout="Single" ServiceUrl="pageasimage.ashx" SearchServiceUrl="search.ashx" VerticalSpacing="20" HorisontalSpacing="20" />
         </td>
      </tr>
   </table>
   <div>
      <asp:TextBox runat="server" ID="TextFind" Width="200px" /><asp:Button runat="server" ID="buttonFind" Text="Find"/><asp:Button runat="server" ID="buttonCancel" Text="Cancel" Enabled="false"/>
      <asp:CheckBox ID="checkMatchCase" runat="server" Text="Match case" /> <asp:CheckBox ID="checkMatchWord" runat="server" Text="Match whole word" />
      <div id="results"></div>
   </div>
   <div style="border: 1px solid #999999; background-color: #eeeeee; margin: 5px 0px; padding: 2px; position: absolute; top: 75px; left: 1000px; display:block;">
   <p><strong>Control</strong><br />
   Offset : <span id="debug_offset"></span><br />
   Zoom : <span id="debug_zoom"></span><br />
   Page : <span id="debug_page"></span><br />
   PageLayout: <span id="debug_pageLayout"></span><br />
   Outer size : <span id="debug_outer_size"></span><br />
   Inner size : <span id="debug_inner_size"></span><br />
   Scrolling: <span id="debug_scroll"></span>
   </p>
   <p><strong>Container</strong><br />
   Pos : <span id="divX"></span>, <span id="divY"></span><br />
   Size :<span id="divW"></span>, <span id="divH"></span></p>
   <p><strong>Background</strong><br />
   <span id="back"></span></p>
   <p><strong>Image</strong><br />
   <span id="debug_image"></span></p>
   <p><strong>Mode</strong><br />
   <span id="debug_mode"></span></p>
   </div>
   <h2>JavaScript interaction</h2>
   <ul>
      <li><a href="#" onclick="showDocInfo(); return false;">Get document info</a></li>
      <li>Mode : <a href="#" onclick="$find('pdfViewer').set_cursorMode('zoomIn')">zoom in</a>  <a href="#" onclick="$find('pdfViewer').set_cursorMode('zoomOut')">zoom out</a> <a href="#" onclick="$find('pdfViewer').set_cursorMode('pan')">pan</a></li>
      <li>Scroll to : <a href="#" onclick="scrollTo('bottom')">bottom</a> <a href="#" onclick="scrollTo('top')">top</a> <a href="#" onclick="scrollTo('left')">left</a> <a href="#" onclick="scrollTo('right')">right</a></li>
      <li>Resize : width = <input type="text" maxlength="3" id="width" size="3" /> height = <input type="text" id="height" maxlength="3" size="3"/> / <a href="#" onclick="$find('pdfViewer').set_size({ width : document.getElementById('width').value, height : document.getElementById('height').value}); return false;">Resize</a></li>
      <li>Rotation: <a href="#" onclick="rotate(0)">0</a> <a href="#" onclick="rotate(90)">90</a> <a href="#" onclick="rotate(180)">180</a> <a href="#" onclick="rotate(270)">270</a></li>
   </ul>
   </form>

   <script type="text/javascript">
      function rotate(rotation) {
         var viewer = $find('pdfViewer');
         viewer.rotate(rotation);
         return false;
      }

      function scrollTo(position) {
         var viewer = $find('pdfViewer');
         var pageIndex = viewer.get_pageIndex();
         var page = viewer.get_document().Pages[pageIndex];
         switch (position) {
            case 'bottom':
               viewer.goTo(pageIndex, null, { y: page.Height });
               break;
            case 'top':
               viewer.goTo(pageIndex, null, { y: 0 });
               break;
            case 'left':
               viewer.goTo(pageIndex, null, { x: 0 });
               break;
            case 'right':
               viewer.goTo(pageIndex, null, { x: page.Width });
               break; 
         }
      }


      function showDocInfo() {
         var viewer = $find('pdfViewer');
         if (viewer) {
            var doc = viewer.get_document();
            if (!doc.IsValid) {
               alert("No document loaded.");
            }
            else {
               alert(
               "Title: " + doc.DocumentInfo.Title +
               "\nSubject: " + doc.DocumentInfo.Subject +
               "\nKeywords: " + doc.DocumentInfo.Keywords +
               "\nAuthor: " + doc.DocumentInfo.Author +
               "\nCreator: " + doc.DocumentInfo.Creator +
               "\n\nPages: " + doc.Pages.length);

            }
         }
      }

      function highlight(page, rectangles) {
      var viewer = $find('pdfViewer');
      if (viewer) {
         if (viewer.get_pageIndex() != page) {
            viewer.goTo(page, null, null);
         }
            viewer._drawRectangles(rectangles);
         }
      }


      Sys.Application.add_init(function () {

         var control = $find("pdfViewer");
         control.add_updated(function () {
            var imgSize = control._image.parseImageProperties(control._container.style.backgroundImage);
            $get('debug_image').innerHTML = "Offset :" + imgSize.offsetX + ", " + imgSize.offsetY + "<br/>" +
            "Size : " + imgSize.width + ", " + imgSize.height + "<br/>" +
            "Zoom : " + imgSize.zoom + "<br/>" +
            "Page : " + imgSize.pageIndex;
            var size = control.get_size();
            document.getElementById('width').value = size.width;
            document.getElementById('height').value = size.height;
         });

         window.setInterval(function () {

            $get('debug_offset').innerHTML = control._offsetX + " / " + control._offsetY;
            $get('debug_zoom').innerHTML = control._zoom;
            $get('debug_page').innerHTML = control.get_pageIndex();
            $get('debug_pageLayout').innerHTML = control._pageLayout;
            $get('debug_mode').innerHTML = control._cursorMode;
            $get('debug_outer_size').innerHTML = control._container.parentNode.offsetWidth + " / " + control._container.parentNode.offsetHeight;
            $get('debug_inner_size').innerHTML = control._container.parentNode.clientWidth + " / " + control._container.parentNode.clientHeight;
            var scrollInfo = control._hasScrollBars();
            $get('debug_scroll').innerHTML = 'h :' + (scrollInfo.horizontal ? control._container.parentNode.scrollLeft : "-") + ' / v :' + (scrollInfo.vertical ? control._container.parentNode.scrollTop : "-");
            $get('divX').innerHTML = control._container.offsetTop;
            $get('divY').innerHTML = control._container.offsetLeft;
            $get('divW').innerHTML = control._container.style.width;
            $get('divH').innerHTML = control._container.style.height;
            $get('back').innerHTML = control._container.style.backgroundPosition;

         }, 500);
      });

      /*Sys.Application.add_init(function() {
         var control = $find("pdfViewer");
         function SetInitialZoom() {
            control.set_zoom('width');
            control.remove_updated(SetInitialZoom);
         };
         control.add_updated(SetInitialZoom);
      }); */
   </script>
</body>
</html>
